<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/flex布局.css">

</head>

<body>
    <div class="container">
        <div class="content">
            <div class="my-header">
                <img src="../img/kb.jpg" alt="">
                <a href="#">请登录</a>
            </div>
            <div class="my-main">
                <div class="my-balance my-style">
                    <div class="balance-left">
                        <i>￥0</i>
                        <b>余额</b>
                    </div>
                    <div class="balance-line"></div>
                    <div class="balance-right">
                        <i>0</i>
                        <b>优惠卷</b>
                    </div>
                </div>
                <div class="my-order my-style">
                    <div class="order-text">
                        <h4>我的订单</h4>
                        <a href="#">全部订单></a>
                    </div>
                    <ul class="fn-textcenter">
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/代发货.png" alt=""></i>
                                <p>代发货</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/配送中.png" alt=""></i>
                                <p>配送中</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/待提货.png" alt=""></i>
                                <p>代提货</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/售后服务支持.png" alt=""></i>
                                <p>售后服务</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="my-service my-style">
                    <h4>我的服务</h4>
                    <ul class="fn-textcenter">
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/更多.png" alt=""></i>
                                <p>快速核销</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/我的地址.png" alt=""></i>
                                <p>我的地址</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/我的拼图.png" alt=""></i>
                                <p>我的拼图</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/兑换优惠券.png" alt=""></i>
                                <p>兑换优惠券</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/领券中心.png" alt=""></i>
                                <p>领券中心</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/报名.png" alt=""></i>
                                <p>接龙报名</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/会员.png" alt=""></i>
                                <p>会员family</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/设置.png" alt=""></i>
                                <p>设置</p>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="footer">
                <div class="footer-lists">
                    <ul>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/shouye.png" alt=""></i>
                                <p>首页</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="../img/iconfont/分类.png" alt=""></i>
                                <p>分类</p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="gw">
                                <i><img src="../img/iconfont/购物车.png" alt=""></i>
                                <p>购物车</p>
                                <b>0</b>
                            </a>
                        </li>
                        <li class="selected">
                            <a href="../html/flex布局_my.html">
                                <i><img src="../img/iconfont/我的.png" alt=""></i>
                                <p>我的</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>